// import React from "react";
// import { connect } from "react-redux";

// const mapStateToProps = (state) => {
//   return {
//     list: state.list,
//   };
// };

// const mapDispatchToProps = (dispatch) => {
//   return {
//     removeOne(id) {
//       dispatch({ type: "removeOne", id });
//     },
//   };
// };

// const List = (props) => {
//   const remove = (id) => () => {
//     props.removeOne(id);
//   };

//   return (
//     <ul>
//       {props.list.map((item) => (
//         <li key={item.id}>
//           {item.name} - <button onClick={remove(item.id)}>删除</button>
//         </li>
//       ))}
//     </ul>
//   );
// };

// export default connect(mapStateToProps, mapDispatchToProps)(List);

import React from "react";
// useSelector用于获取仓库的数据
// useDispatch用于获取仓库的方法
import { useSelector, useDispatch } from "react-redux";

const List = () => {
  const list = useSelector((state) => state.list);
  // const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>
          {item.name} -{" "}
          <button onClick={() => dispatch({ type: "removeOne", id: item.id })}>
            删除
          </button>
        </li>
      ))}
    </ul>
  );
};

export default List;
